<template>
    <div class = 'mysearch'>
        <div class = 'top'>
            <div class = 'back'>
                <router-link :to = '{path : "/cinema",query : {name : cityName,id : cityId}}'>返回</router-link>
                </div>
            <div class = 'input'>
                <i class = 'iconfont icon-sousuo'></i>
                <input type = 'text' placeholder = '请输入关键字' @keydown.enter = 'search' v-model = 'keyword'>
            </div>
            <div class = 'button' @click = 'search'>搜索</div>
        </div>
        <div class = 'result'>
            <div v-if = "!istrue && !iswait" class = 'resultNone'>
                输入正确的关键字才有结果哦..
            </div>
            <div v-if = "iswait" class = 'resultNone'>
                <waiting></waiting>
            </div>
            <div class = 'Clist' v-if = 'istrue && !iswait'>
                <ul>
                    <li v-for = 'item in cinemaData'>
                        <router-link :to = '{path:"/cdetail",query:{id:item.id,Cid:cityId}}'>

                        <div class = 'Clist-left'>
                            <div class = 'Clist-name'>{{item.info.name}}</div>
                            <div class = 'Clist-location'>{{item.info.address}}</div>
                        </div>
                        <div class = 'Clist-right'>
                            <div class = 'Clist-price'>
                                <span>¥{{item.info.price}}</span>
                                <span class = 'priceText'>起</span>
                            </div>
                            <div class = 'Clist-distance'>{{item.distance}}</div>
                        </div>
                        </router-link>
                    </li>
                    <div>我也是有底线的~</div>
                </ul>
        </div>
        </div>
    </div>
</template>
<script>
import waiting from '@/components/waiting.vue';
export default{
    data(){
        return {
            isback : false,
            cinemaData : [],
            keyword : "",
            istrue : false,
            cityId : 0,
            cityName : '',
            iswait : false ,
        }
    },
    components:{
            waiting,
    },
    methods:{
        search(){
            if(this.keyword == ''){
                this.istrue = false;
                return ;
            }
            this.iswait = true;
            axios.get(`https://apis.netstart.cn/maoyan/search/cinemas?keyword=${this.keyword}&ci=${this.cityId}`).then(
                data => {
                    this.cinemaData = data.data;
                    // console.log(data.data)
                    if(this.cinemaData.length == 0){
                        this.istrue = false;
                    }else{
                        this.istrue = true;
                    }
                    this.iswait = false;
                }
            )
        },
    },
   created(){
    //   console.log(this.$route.query)
        this.cityId = this.$route.query.cityId;
        this.cityName = this.$route.query.cityName;
   }
}
</script>
<style lang = 'scss'scoped>
body{
    .mysearch{
        position : absolute;
        top : 0px;
        width : 100%;
        height : 100%;
        z-index : 100;
        background-color : #f4f4f4;
        .top{
            height : 50px;
            background-color : white;
            padding : 10px 0;
            >div{
                float : left;
                height : 100%;
            }
            .back{
                font-size : 16px;
                color : #3e606f;
                width : 20%;
                text-align :center;
                line-height : 50px;
                border-radius : 10px;
                /* border : 1px solid #ff9900; */
            }
            .input{
                background-color : white;
                height : 100%;
                margin : 0px auto;
                width : 60%;
                border-radius : 5px;
                position : relative;
                input{
                    background-color : #f4f4f4;
                    position: absolute;
                    top : 5px;
                    height : 30px;
                    outline : none;
                    margin : 4px;
                    padding-left : 30px;
                    border : 0;
                    width : 100%;
                    z-index : 2;
                    border-radius : 10px;
                }
                i{
                    position: absolute;
                    top : 16px;
                    left : 12px;
                    z-index : 3;
                }
        }
            .button{
                width : 20%;
                float : right;
                font-size : 16px;
                color : #3e606f;
                width : 20%;
                text-align :center;
                line-height : 50px;
                border-radius : 10px;
            }
        }
        .result{
            .resultNone{
                height : 300px;
                line-height : 300px;
                text-align : center;
                font-size : 18px;
                color : gray;
            }
            .Clist{
                margin-bottom : 60px;
                >ul{
                    >li{
                        background-color : white;
                        margin : 2px 0;
                        padding : 10px;
                        &::after{
                            content : '';
                            display : block;
                            clear : both;
                        }
                        .Clist-left{
                            width: 80%;
                            float : left;
                            >div{
                                 overflow: hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                            }
                            .Clist-name{
                                font-size : 16px;
                                color : #8a0917;
                            }
                            .Clist-location{
                                margin-top : 5px;
                                font-size : 14px;
                                color : grey;
                               
                            }
                        }
                        .Clist-right{
                            width: 16%;
                            float : right;
                            .Clist-price{
                                width : 100%;
                                font-size : 16px;
                                color : #ff9900;
                                .priceText{
                                    font-size : 12px;
                                }
                            }
                            .Clist-distance{
                                margin-top : 5px;
                                font-size : 14px;
                                color : grey;
                            }
                        }
                    }
                    >div{
                        height : 50px;
                        line-height : 50px;
                        text-align : center;
                        font-size : 18px;
                        color : gray;
                    }
                }
            }
        }
    }
}

</style>